@use 'sass:map';
@use '@angular/material' as mat;

@use 'typography' as typography;
@use 'utils' as utils;

@use 'light-theme' as light-theme;
@use 'dark-theme' as dark-theme;

@use '../app/app.component.theme' as app-component;
@use '../app/shared/scrollspy-nav/scrollspy-nav.component.theme' as scrollspy-nav-component;

@mixin native-element-theme($theme) {
  $color-config: mat.m2-get-color-config($theme);

  $primary-palette: map.get($color-config, 'primary');
  $accent-palette: map.get($color-config, 'accent');
  $foreground-palette: map.get($color-config, 'foreground');

  a,
  a:active,
  a:focus,
  a:visited {
    color: mat.m2-get-color-from-palette($accent-palette, A400);
    text-decoration: none;
  }

  a:hover {
    text-decoration: underline;
  }

  blockquote {
    background: mat.m2-get-color-from-palette($primary-palette, 300, 0.14);
    border-left: 4px solid mat.m2-get-color-from-palette($accent-palette, 'default');
    border-radius: 4px;
    color: utils.soften-color(mat.m2-get-color-from-palette($foreground-palette, 'base'), 40%);
    margin: 20px 0;
    padding: 1px 20px;
  }

  code:not([class*="language-"]) {
    background: mat.m2-get-color-from-palette($foreground-palette, 'secondary-text', 0.07);
    border-radius: 3px;
    font-size: 0.94em;
    padding: 0px 6px 2px;
    overflow-wrap: break-word;
  }

  hr {
    border-color: mat.m2-get-color-from-palette($foreground-palette, 'divider');
    border-style: solid;
    border-width: 1px 0 0 0;
  }

  table {
    th {
      color: mat.m2-get-color-from-palette($foreground-palette, 'secondary-text');
    }

    td,
    th {
      border-bottom-color: mat.m2-get-color-from-palette($foreground-palette, 'divider');
    }
  }
}

@mixin material-element-themes($theme) {
  @include mat.core-color($theme);
  @include mat.divider-theme($theme);
  @include mat.fab-theme($theme);
  @include mat.form-field-theme($theme);
  @include mat.icon-button-theme($theme);
  @include mat.icon-theme($theme);
  @include mat.input-theme($theme);
  @include mat.snack-bar-theme($theme);
  @include mat.tabs-theme($theme);
  @include mat.toolbar-theme($theme);
}

@mixin app-component-themes($theme) {
  @include app-component.theme($theme);
  @include scrollspy-nav-component.theme($theme);
}

@mixin theme($theme, $name) {
  .#{$name}-theme {
    @include native-element-theme($theme);
    @include material-element-themes($theme);
    @include app-component-themes($theme);
  }
}

// common theme styling
body {
  font-family: typography.$font-family;
}

// material core
@include mat.elevation-classes();
@include mat.app-background();

// themes
@include theme(light-theme.$theme, 'light');
@include theme(dark-theme.$theme, 'dark');
